<template>
  <div class="container mx-auto p-4">
    <main class="flex justify-center space-x-4 mb-8">
      <Celiang :message="{ id: pile1.id, pileNumber: pile1.pileNumber, mileage: pile1.mileage, offset: pile1.offset, coordinateX: pile1.coordinateX, coordinateY: pile1.coordinateY, pileBottomElevation: pile1.pileBottomElevation, pileTopElevation: pile1.pileTopElevation, pileDiameter: pile1.pileDiameter }" />
      <Shigong @get-message="getMessage"/>
      <Ziliao />
    </main>

    <h1 class="text-3xl font-bold text-center text-gray-800 mb-4">{{ list.length }}</h1>
    <h1 class="text-3xl font-bold text-center text-gray-800 mb-4">{{ list.length }}</h1>
    <h1 class="text-3xl font-bold text-center text-gray-800 mb-4">{{ computedList.length }}</h1>

    <div id="app">
      <h1 class="text-3xl font-bold text-center text-gray-800 mb-4">桩基数据列表</h1>
      <div class="overflow-x-auto">
        <table class="table-auto border-collapse border border-gray-300">
          <thead>
          <tr class="bg-gray-100">
            <th class="px-4 py-2 border border-gray-300 whitespace-nowrap">ID</th>
            <th class="px-4 py-2 border border-gray-300 whitespace-nowrap">桩基号</th>
            <th class="px-4 py-2 border border-gray-300 whitespace-nowrap">里程</th>
            <th class="px-4 py-2 border border-gray-300 whitespace-nowrap">偏距</th>
            <th class="px-4 py-2 border border-gray-300 whitespace-nowrap">坐标X</th>
            <th class="px-4 py-2 border border-gray-300 whitespace-nowrap">坐标Y</th>
            <th class="px-4 py-2 border border-gray-300 whitespace-nowrap">桩底高程</th>
            <th class="px-4 py-2 border border-gray-300 whitespace-nowrap">桩顶高程</th>
            <th class="px-4 py-2 border border-gray-300 whitespace-nowrap">桩径</th>
            <th class="px-4 py-2 border border-gray-300 whitespace-nowrap">桩长</th>
            <th class="px-4 py-2 border border-gray-300 whitespace-nowrap">钢筋笼长度</th>
            <th class="px-4 py-2 border border-gray-300 whitespace-nowrap">超灌长度</th>
            <th class="px-4 py-2 border border-gray-300 whitespace-nowrap">地面高程</th>
            <th class="px-4 py-2 border border-gray-300 whitespace-nowrap">实际桩底高程</th>
            <th class="px-4 py-2 border border-gray-300 whitespace-nowrap">开挖时间</th>
            <th class="px-4 py-2 border border-gray-300 whitespace-nowrap">开孔时间</th>
            <th class="px-4 py-2 border border-gray-300 whitespace-nowrap">成孔时间</th>
            <th class="px-4 py-2 border border-gray-300 whitespace-nowrap">下钢筋笼时间</th>
            <th class="px-4 py-2 border border-gray-300 whitespace-nowrap">下导管时间</th>
            <th class="px-4 py-2 border border-gray-300 whitespace-nowrap">浇筑时间</th>
            <th class="px-4 py-2 border border-gray-300 whitespace-nowrap">试块编号</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="pile in pileData" :key="pile.id" @click="pileClick(pile)" class="hover:bg-gray-50 transition duration-150 ease-in-out">
            <td class="px-4 py-2 border border-gray-300 whitespace-nowrap">{{ pile.id }}</td>
            <td class="px-4 py-2 border border-gray-300 whitespace-nowrap">
              <input v-model="pile.pileNumber" type="text" class="border border-gray-300 rounded px-2 py-1 whitespace-nowrap">
            </td>
            <td class="px-4 py-2 border border-gray-300 whitespace-nowrap">
              <input v-model="pile.mileage" type="number" class="border border-gray-300 rounded px-2 py-1 whitespace-nowrap">
            </td>
            <td class="px-4 py-2 border border-gray-300 whitespace-nowrap">
              <input v-model="pile.offset" type="number" class="border border-gray-300 rounded px-2 py-1 whitespace-nowrap">
            </td>
            <td class="px-4 py-2 border border-gray-300 whitespace-nowrap">
              <input v-model="pile.coordinateX" type="number" class="border border-gray-300 rounded px-2 py-1 whitespace-nowrap">
            </td>
            <td class="px-4 py-2 border border-gray-300 whitespace-nowrap">
              <input v-model="pile.coordinateY" type="number" class="border border-gray-300 rounded px-2 py-1 whitespace-nowrap">
            </td>
            <td class="px-4 py-2 border border-gray-300 whitespace-nowrap">
              <input v-model="pile.pileBottomElevation" type="number" class="border border-gray-300 rounded px-2 py-1 whitespace-nowrap">
            </td>
            <td class="px-4 py-2 border border-gray-300 whitespace-nowrap">
              <input v-model="pile.pileTopElevation" type="number" class="border border-gray-300 rounded px-2 py-1 whitespace-nowrap">
            </td>
            <td class="px-4 py-2 border border-gray-300 whitespace-nowrap">
              <input v-model="pile.pileDiameter" type="number" class="border border-gray-300 rounded px-2 py-1 whitespace-nowrap">
            </td>
            <td class="px-4 py-2 border border-gray-300 whitespace-nowrap">
              <input v-model="pile.pileLength" type="number" class="border border-gray-300 rounded px-2 py-1 whitespace-nowrap">
            </td>
            <td class="px-4 py-2 border border-gray-300 whitespace-nowrap">
              <input v-model="pile.steelCageLength" type="number" class="border border-gray-300 rounded px-2 py-1 whitespace-nowrap">
            </td>
            <td class="px-4 py-2 border border-gray-300 whitespace-nowrap">
              <input v-model="pile.overPouringLength" type="number" class="border border-gray-300 rounded px-2 py-1 whitespace-nowrap">
            </td>
            <td class="px-4 py-2 border border-gray-300 whitespace-nowrap">
              <input v-model="pile.groundElevation" type="number" class="border border-gray-300 rounded px-2 py-1 whitespace-nowrap">
            </td>
            <td class="px-4 py-2 border border-gray-300 whitespace-nowrap">
              <input v-model="pile.actualPileBottomElevation" type="number" class="border border-gray-300 rounded px-2 py-1 whitespace-nowrap">
            </td>
            <td class="px-4 py-2 border border-gray-300 whitespace-nowrap">
              <input v-model="pile.excavationTime" type="text" class="border border-gray-300 rounded px-2 py-1 whitespace-nowrap">
            </td>
            <td class="px-4 py-2 border border-gray-300 whitespace-nowrap">
              <input v-model="pile.holeOpeningTime" type="text" class="border border-gray-300 rounded px-2 py-1 whitespace-nowrap">
            </td>
            <td class="px-4 py-2 border border-gray-300 whitespace-nowrap">
              <input v-model="pile.holeCompletionTime" type="text" class="border border-gray-300 rounded px-2 py-1 whitespace-nowrap">
            </td>
            <td class="px-4 py-2 border border-gray-300 whitespace-nowrap">
              <input v-model="pile.reinforcementCageLoweringTime" type="text" class="border border-gray-300 rounded px-2 py-1 whitespace-nowrap">
            </td>
            <td class="px-4 py-2 border border-gray-300 whitespace-nowrap">
              <input v-model="pile.conduitLoweringTime" type="text" class="border border-gray-300 rounded px-2 py-1 whitespace-nowrap">
            </td>
            <td class="px-4 py-2 border border-gray-300 whitespace-nowrap">
              <input v-model="pile.pouringTime" type="text" class="border border-gray-300 rounded px-2 py-1 whitespace-nowrap">
            </td>
            <td class="px-4 py-2 border border-gray-300 whitespace-nowrap">
              <input v-model="pile.testBlockNumber" type="text" class="border border-gray-300 rounded px-2 py-1 whitespace-nowrap">
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="flex justify-center mt-4">

        <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
        <span class="mx-2">{{ currentPage }} / {{ totalPages }}</span>
        <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import Celiang from "@/components/icons/Celiang.vue";
import Shigong from "@/components/icons/Shigong.vue";
import Ziliao from "@/components/icons/Ziliao.vue";
import { computed, onMounted, ref, watch } from "vue";
import axios from "axios";

const getMessage=(msg)=>{
  console.log(msg)
}
defineProps({
  message: { type: String, required: true },
});

const list = ref([]);
const pileData = ref([]);
const currentPage = ref(1);
const itemsPerPage = ref(2);
const totalPages = ref(1);

const computedList = computed(() => {
  return list.value.filter((item) => item.id % 2 === 1);
});

const paginatedPileData = computed(() => {
  const startIndex = (currentPage.value - 1) * itemsPerPage.value;
  const endIndex = startIndex + itemsPerPage.value;
  return pileData.value.slice(startIndex, endIndex);
});

const getPileData = () => {
  axios
      .get(`http://localhost:8080/pileData/page?pageNum=${currentPage.value}&pageSize=${itemsPerPage.value}`)
      .then((res) => {
        pileData.value = res.data.records;
        list.value = pileData.value;
        totalPages.value = Math.ceil(res.data.total / itemsPerPage.value);
      })
      .catch((error) => {
        console.log("数据错误", error);
      });
};

const pile1 = ref({
  id: 1,
  pileNumber: "P001",
  mileage: 100.0,
  offset: 5.0,
  coordinateX: 100.0,
  coordinateY: 200.0,
  pileBottomElevation: 50.0,
  pileTopElevation: 100.0,
  pileDiameter: 1.5,
});

const pileClick = (pile) => {
  console.log("pile.pileClick(pile)选中的哪条数据");
  pile1.value = pile;
  console.log(pile);
  console.log(pile1.value);
};

const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
    getPileData();
  }
};

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
    getPileData();
  }
};

// 监听 currentPage 的变化，确保数据更新
watch(currentPage, () => {
  getPileData();
});

setTimeout(() => {
  console.log('定时任务触发，该做点什么了吧', computedList.value,totalPages);
}, 3000);

watch(list, (newVal, oldVal) => {
  console.log("list 发生了变化", newVal, oldVal);
});

onMounted(() => {
  getPileData();
});
</script>

<style scoped>
/* 可根据需要添加自定义样式 */
</style>